<template>
    <div>

        <div class="tag-group">
            <span class="tag-box-2 tag-1"></span>
            <div class="tag-group-text">总分红/现金流净额</div>
        </div>

        <div id="Chart14" :style="{width: '100%', height: '300px'}"></div>

        <table border="1" bordercolor="#E6E7E8">
            <tr>
                <th></th>
                <th v-for="(item,index) in chartData" :key="index">{{ item.year }}年报</th>
            </tr>
            <tr>
                <td>
                    <span class="tar-box-2 tar-1"></span>
                </td>
                <td v-for="(item,index) in chartData" :key="index">{{ item.ratio | Scale }}%</td>
            </tr>
            <tr>
                <td></td>
                <td v-for="(item,index) in chartData" :key="index">
                    <img :src="IMG_URL + '/tag-6.png'" class="avatar" v-if="item.risk == 0">
                    <img :src="IMG_URL + '/tag-3.png'" class="avatar" v-if="item.risk == 1">
                    <img :src="IMG_URL + '/tag-5.png'" class="avatar" v-if="item.risk == 2">
                    <p class="desc">{{ item.risk | getRisk }}</p>
                </td>
            </tr>
        </table>


    </div>
</template>

<script>

    import {bonus} from "../../api/index";

    export default {
        name: "echart14",
        data(){
            return {
                chartData: []
            }
        },
        filters: {
            Scale(val){
                return (val * 100).toFixed(2)
            },
            getRisk(val){  // 0-吝啬 1-良好 2-难以持续 ,
                let msg = '';
                switch (parseInt(val)) {
                    case 0:
                        msg = '吝啬';
                        break;
                    case 1:
                        msg = '良好';
                        break;
                    case 2:
                        msg = '难以持续';
                        break;
                    default:
                        msg = '吝啬';
                        break;
                }
                return msg;
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init(){
                let tscode = this.$route.query.tscode;
                let Chart = this.$echarts.init(document.getElementById('Chart14'));
                let yearArr = [];
                let ratioArr = [];

                await bonus(tscode).then(res=>{
                    this.chartData = res;

                    res.forEach(item=>{
                        yearArr.push(item.year);
                        ratioArr.push(parseFloat((item.ratio * 100).toFixed(2)));
                    });

                    let option = {
                        color: '#6467F0',
                       /* legend: {
                            data: ['总分红/现金流净额'],
                            left: '0',
                            top: '0',
                            textStyle: {
                                color: '#333',
                            }
                        },*/
                       grid: {
                           y: '20',
                           x: '50'
                       },
                        xAxis: {
                            type: 'category',
                            data: yearArr
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}%'
                            },
                            axisLine:{
                                lineStyle: {
                                    color: '#999999'
                                }
                            }
                        },
                        series: [
                            {
                                name: '总分红/现金流净额',
                                data: ratioArr,
                                type: 'line',
                                itemStyle: {
                                    color: '#6467F0'
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#6467F0'
                                    }
                                },
                                areaStyle: {
                                    color: '#6467F0',
                                    opacity: 0.1
                                }
                            }
                        ]
                    };

                    Chart.setOption(option);
                });



            }
        }
    }
</script>

<style scoped lang="less">
    table{
        margin-top: -32px;
        width: 100%;
        font-size: 12px;
        font-weight: 500;
        zoom: 0.95;

        th,td{
            height: 30px;
            line-height: 30px;
        }

        .avatar{
            width: 24px;
            position: relative;
            top: 5px;
        }
        .desc{
            margin-top: -8px;
            margin-bottom: -6px;
        }
    }
</style>
